<template>
  <div class="group-list">
    <h3 class="text-lg font-semibold mb-3">任务分组</h3>
    <n-list>
      <n-list-item 
        v-for="group in groups" 
        :key="group.group_id"
        :class="{
          'bg-primary/10 dark:bg-primary/20': currentGroupId === group.group_id
        }"
        class="cursor-pointer rounded-md transition-colors"
        @click="selectGroup(group.group_id)"
      >
        <template #prefix>
          <n-icon size="18">
            <ListOutline />
          </n-icon>
        </template>
        <div class="flex justify-between items-center w-full">
          <span>{{ group.name }}</span>
          <n-tag size="small" type="info" v-if="group.is_default">
            默认
          </n-tag>
        </div>
        <template #suffix>
          <n-badge :value="group.task_count || 0" type="info" />
        </template>
      </n-list-item>
    </n-list>
    
    <!-- 添加分组按钮 -->
    <n-button 
      block 
      text 
      type="primary" 
      @click="showCreateGroupDialog = true"
      class="mt-3"
    >
      <template #icon>
        <n-icon size="18">
          <AddOutline />
        </n-icon>
      </template>
      添加分组
    </n-button>
    
    <!-- 创建分组对话框 -->
    <n-dialog v-model:show="showCreateGroupDialog" title="创建分组">
      <n-form 
        :model="createGroupForm" 
        :rules="createGroupRules"
        ref="createGroupFormRef"
      >
        <n-form-item path="name">
          <n-input 
            v-model:value="createGroupForm.name" 
            placeholder="请输入分组名称"
            autofocus
          />
        </n-form-item>
      </n-form>
      <template #footer>
        <div class="flex justify-end space-x-2">
          <n-button @click="showCreateGroupDialog = false">取消</n-button>
          <n-button 
            type="primary" 
            @click="createGroup"
            :loading="isCreating"
          >
            创建
          </n-button>
        </div>
      </template>
    </n-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Group } from '@/types'
import { useGroupStore } from '@/store/group'
import { ListOutline, AddOutline } from '@vicons/ionicons5'
import type { FormInstance } from 'naive-ui'

// 组件属性
const props = defineProps<{
  groups: Group[]
  currentGroupId: number
}>()

// 组件事件
const emit = defineEmits<{
  (e: 'select', groupId: number): void
}>()

// 状态
const showCreateGroupDialog = ref<boolean>(false)
const isCreating = ref<boolean>(false)
const createGroupFormRef = ref<FormInstance | null>(null)

// 创建分组表单
const createGroupForm = reactive({
  name: ''
})

// 创建分组表单规则
const createGroupRules = {
  name: [
    { required: true, message: '请输入分组名称', trigger: 'blur' },
    { min: 1, max: 20, message: '分组名称长度在 1 到 20 个字符', trigger: 'blur' }
  ]
}

// 分组store
const groupStore = useGroupStore()

// 选择分组
const selectGroup = (groupId: number) => {
  emit('select', groupId)
}

// 创建分组
const createGroup = async () => {
  if (!createGroupFormRef.value) return
  
  try {
    await createGroupFormRef.value.validate()
    isCreating.value = true
    await groupStore.createGroup(createGroupForm)
    showCreateGroupDialog.value = false
    // 重置表单
    createGroupForm.name = ''
  } catch (error) {
    console.error('创建分组失败:', error)
  } finally {
    isCreating.value = false
  }
}
</script>

<style scoped>
.group-list {
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 暗黑模式样式 */
.dark .group-list {
  background-color: #1f2937;
}
</style>
